import React, { Component } from 'react'
import { Cell, Checkbox, Flex, Typography, Dialog, SubmitBar } from 'react-vant';
import '../App.css'
import { Add, Delete } from '@react-vant/icons';
import Ctx from './store/Ctx';

export default class Home extends Component {

  //上下文传参
  static contextType = Ctx

  //全选的方法
  get all() {
    return this.context.list.every(item => {
      return item.sed
    })
  }
  //收入和支出 合计
  get total() {
    let { list } = this.context
    return list.reduce((p, n) => {
      if (n.sed) {
        return p + n.price * 1
      }
      return p
    }, 0)
  }


  render() {

    /*  console.log(this.context); */
    let { list, changeSed, changedelAll, changedelOne, changeSr, changeZc, changeSetSed } = this.context

    return (
      <div className='homebox'>
        {/* 单元格组件 */}
        <div className='homelist'>
          {
            list.map(item => {
              return <Cell
                center
                key={item.id}
                title={item.title}
                label={item.bz}
                icon={<Checkbox checked={item.sed} onChange={() => {
                  changeSed(item.id)
                }} />}
                value={<>
                  <p onClick={() => {
                    changedelOne(item.id)
                  }}>删除</p>
                  <Typography.Text type={item.type ? 'primary' : 'danger'}>
                    {item.type ? '+' : '-'}{item.price}
                  </Typography.Text>
                </>}
              />
            })
          }
        </div>

        {/* 添加图标组件 */}
        <div style={{ textAlign: 'center', margin: '20px 0' }}>
          <Add style={{ fontSize: '80px', color: 'blue' }} onClick={() => {
            this.props.history.push('/add')
          }} />
        </div>

        {/* 总收入 总支出 结余 和删除 flex布局和文本组件*/}
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
          <Flex justify='center' align='center'>
            <Flex.Item span={10}>
              <Typography.Text>总收入:{changeSr()}</Typography.Text><br />
              <Typography.Text>总支出:{changeZc()}</Typography.Text><br />
              <Typography.Text type='success'>结余:{changeSr() - changeZc()}</Typography.Text>
            </Flex.Item>
            <Flex.Item span={10}>
              <span onClick={() => {
                Dialog.confirm({
                  title: '提示',
                  message: '确定删除选中的数据吗',
                  onCancel: () => console.log('cancel'),
                  onConfirm: () => {
                    //批量删除 
                    changedelAll()
                  },
                }).catch(err => { })

              }}>
                <Delete style={{ fontSize: '40px', color: 'gray' }} />
              </span>
            </Flex.Item>
          </Flex>
        </div>

        {/* 提交订单栏 */}
        <div>
          <SubmitBar
            price={this.total * 100}
            buttonText="提交订单"
            buttonColor='green'
            style={{ '--rv-submit-bar-price-color': 'green' }}
          >
            <Checkbox checked={this.all} onChange={(e) => { //参数e是布尔值
              changeSetSed(e)
            }
            }>全选</Checkbox>
          </SubmitBar>
        </div>

      </div>
    )
  }
}
